<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
    >
        <!-- 表单 -->
        <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            label-width="80px"
            :inline="false"
        >
            <el-form-item label="文件数据" prop="data">
                <el-upload
                    name="data"
                    :multiple="false"
                    :show-file-list="true"
                    :on-change="onChange"
                    limit="1"
                    v-model="data"
                    placeholder=""
                    clearable
                    :auto-upload="false"
                >
                    <!--                    <el-button size="medium" type="primary">上传文件</el-button>-->
                    <div style="padding: 10px 0">
                        <Icon type="ios-cloud-upload" size="52"></Icon>
                        <p style="margin-top: 10px; font-size: 14px">
                            点击或拖拽文件至此即可上传文件
                        </p>
                        <p
                            style="
                                margin-top: 20px;
                                font-size: 14px;
                                color: red;
                            "
                        >
                            请上传10GB以内的待测对象
                        </p>
                    </div>
                </el-upload>
            </el-form-item>
        </el-form>

        <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script></script>
<script setup>
import {
    reactive,
    toRefs,
    onMounted,
    ref,
    defineProps,
    defineEmits,
} from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "添加",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title } = toRefs(props);
const closeDialog = () => {
    emit("closeDialog", false);
};

const rules = {
    data: [
        {
            required: true,
            message: "请上传文件",
            trigger: "blur",
        },
    ],
};

const formRef = ref(null);
const form = reactive({
    data: [],
});
const { data } = toRefs(form);

onMounted(async () => {});

/**
 * 计算文件大小
 * @param fileSize
 * @returns {string}
 */
const formatFileSize = (fileSize) => {
    if (fileSize < 1024) {
        return fileSize + "B";
    } else if (fileSize < 1024 * 1024) {
        let temp = fileSize / 1024;
        temp = temp.toFixed(2);
        return temp + "KB";
    } else if (fileSize < 1024 * 1024 * 1024) {
        let temp = fileSize / (1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "MB";
    } else {
        let temp = fileSize / (1024 * 1024 * 1024);
        temp = temp.toFixed(2);
        return temp + "GB";
    }
};
/**
 * 文件更改
 * */
const onChange = (file) => {
    var name = file.name;
    var size = file.size;
    form.name = name;
    form.uid = file.uid;
    if (size != null) {
        form.length = formatFileSize(size);
    }

    form.data = file.raw;
    if (name !== null) {
        var split = name.split(".");
        form.type = split[split.length - 1];
    }
};
/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                let fd = new FormData();
                fd.append("multipartFile", form.data); //传文件
                let res =
                    await VE_API.SysZoneApplicationApi.sysZoneApplicationImportExcel(
                        fd,
                    );
                const { code } = res;
                if (code === 0) {
                    ElMessage.success("导入成功");
                    closeDialog();
                } else {
                    // 业务错误已在axios拦截器中处理
                    console.warn("导入应用失败:", code);
                }
            } catch (error) {
                // 网络错误等异常情况已经在axios拦截器中处理
                console.error("导入应用异常:", error);
            }
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
</script>

<style lang="scss" scoped></style>
